// components/checkCode/checkCode.js
Component({
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    /**
     * 组件的属性列表
     */
    properties: {

    },

    /**
     * 组件的初始数据
     */
    data: {
        // 弹窗显示控制
        isShow: false,
        imgs: [
            "https://i.bdyoo.com/data/upload/wechat/slider/1.png",
            "https://i.bdyoo.com/data/upload/wechat/slider/2.png",
            "https://i.bdyoo.com/data/upload/wechat/slider/3.png",
            "https://i.bdyoo.com/data/upload/wechat/slider/4.png",
            "https://i.bdyoo.com/data/upload/wechat/slider/5.png",
            "https://i.bdyoo.com/data/upload/wechat/slider/6.png"
        ],
        width: '',
        height: '',
        pic: '',
        y: '',
        x: '',
        left: 0,
        leftM: 0,
        formDetail: {}
    },

    /**
     * 组件的方法列表
     */
    methods: {
        move: function (res) {
            let left = res.touches[0].pageX;
            if (left > 0) {
                this.setData({
                    left: left
                })
            } else {
                this.setData({
                    left: this.data.leftM
                })
            }
        },
        end: function (res) {
            let end = this.data.left,
                    moves = this.data.x + this.data.leftM;
            if (Math.abs(end - moves) < 2) {
                wx.showToast({
                    title: '验证成功',
                    icon: 'success',
                    duration: 2000
                });
                this._vertifySuccess();
                /*setTimeout(function() {
                 wx.redirectTo({
                 url: 'verification',
                 })
                 }, 2000)*/
            } else {
                this.setData({
                    left: this.data.leftM
                })
            }
        },
        //隐藏弹框
        hideDialog() {
            let self = this;
            this.setData({
                isShow: !self.data.isShow
            })
        },
        //展示弹框
        showDialog(formDetail) {
            let self = this;
            self.setData({
                isShow: !self.data.isShow,
                formDetail: formDetail
            })
        },
        /*
         * 内部私有方法建议以下划线开头
         * triggerEvent 用于触发事件
         */
        _vertifySuccess() {
            //触发成功回调
            this.triggerEvent("vertifySuccess", this.data.formDetail);
            this.hideDialog();
        },
        drawPic: function () {
            let that = this;
            wx.getSystemInfo({
                success: function (res) {
                    let width = res.windowWidth;
                    let height = res.windowHeight;
                    let leftM = res.windowWidth * 0.03;
                    that.setData({
                        width: width,
                        height: height,
                        leftM: leftM,
                        left: leftM
                    });
                    that.refreshPic();
                },
            });

        },
        refreshPic: function () {
            let that = this;
            const canvas = wx.createCanvasContext('canvas1', this);
            const block = wx.createCanvasContext('block', this);
            //随机获取图片
            var random = Math.floor(Math.random() * this.data.imgs.length);
            const img = that.data.imgs[random],
                    canvas_width = that.data.width * 0.9,
                    canvas_height = that.data.height * 0.3;
            let l = 50,
                    x = 150 + Math.random() * (canvas_width - l - 150),
                    y = 10 + Math.random() * (canvas_height - l - 10);
            that.setData({
                block_w: l,
                y: y,
                x: x
            })

            canvas.drawImage(img, 0, 0, canvas_width, canvas_height);
            canvas.draw(false, setTimeout(() => {
                wx.canvasToTempFilePath({
                    x: x,
                    y: y,
                    width: l,
                    height: l,
                    canvasId: 'canvas1',
                    fileType: 'png',
                    success(res) {
                        //console.log(res.tempFilePath);
                        that.setData({
                            pic: res.tempFilePath
                        })
                    },
                    fail: err => {
                        //console.log(err)
                    }
                }, this)
            }, 500))
            block.beginPath()
            block.moveTo(x, y)
            block.lineTo(x, y + l)
            block.lineTo(x + l, y + l)
            block.lineTo(x + l, y)
            block.globalCompositeOperation = 'xor'
            block.fill()
            block.drawImage(img, 0, 0, canvas_width, canvas_height);
            block.draw()
        },
        closeDialog: function () {
            this.hideDialog();
        }
    },
})